/**
 * 桌布生成器功能
 * 處理桌布生成相關的交互邏輯
 */

$(document).ready(function() {
    // 获取用户类型，默认为游客
    
    // 元素選擇器
    const promptText = $('#promptText');
    const mobileTypeBtn = $('#mobileType');
    const desktopTypeBtn = $('#desktopType');
    const generateBtn = $('#generateBtn');
    const generatorOverlay = $('#generatorOverlay');
    const resultContainer = $('#resultContainer');
    const inputContainer = $('.input-container');
    const generatedImage = $('#generatedImage');
    const imageLoadingOverlay = $('.img-loading-overlay');
    const downloadBtn = $('#downloadBtn');
    const regenerateBtn = $('#regenerateBtn');
    const restartBtn = $('#restartBtn');
    const previewBtn = $('#previewBtn');
    const mobileFrameContainer = $('#mobileFrameContainer');
    
    // 進度條元素
    const progressBar = $('#progressBar');
    const progressText = $('#progressText');
    const timeLeft = $('#timeLeft');
    
    // 當前選擇的桌布類型
    let selectedType = 'mobile'; // 默認為手機桌布
    let lastPrompt = ''; // 記錄上次的輸入
    
    // 進度條相關變量
    let progressInterval;
    let startTime;
    let estimatedTime;
    
    // 初始化检查使用次数限制
    checkUsageLimit();
    
    // 初始化标签切换功能
    initTabSwitching();
    
    // 類型選擇按鈕點擊事件
    mobileTypeBtn.click(function() {
        selectType('mobile');
    });
    
    desktopTypeBtn.click(function() {
        selectType('desktop');
    });
    
    // 設置桌布類型
    function selectType(type) {
        selectedType = type;
        
        if (type === 'mobile') {
            mobileTypeBtn.addClass('type-active');
            desktopTypeBtn.removeClass('type-active');
        } else {
            desktopTypeBtn.addClass('type-active');
            mobileTypeBtn.removeClass('type-active');
        }
    }
    
    // 清晰度選擇按鈕點擊事件
    $('.quality-btn').click(function() {
        // 如果按钮被禁用或者已经是激活状态，则不执行任何操作
        if ($(this).prop('disabled') || $(this).hasClass('quality-active')) {
            return;
        }
        
        $('.quality-btn').removeClass('quality-active');
        $(this).addClass('quality-active');
        
        // 如果点击的是高清选项且用户类型不是注册用户
        if ($(this).attr('id') === 'hdQuality' && typeof userType !== 'undefined' && userType !== 'user') {
            // 显示提示信息
            showToast('請先綁定Google帳號以使用高清選項', 'warning');
            
            // 自动弹出侧边栏，引导用户登录
            setTimeout(function() {
                openUserSidebar();
            }, 1500);
            
            // 重新激活默认选项
            $('#defaultQuality').addClass('quality-active');
            $(this).removeClass('quality-active');
        }
    });
    
    // 生成按鈕點擊事件
    generateBtn.click(function() {
        const prompt = promptText.val().trim();
        lastPrompt = prompt; // 保存當前輸入
        
        // 檢查輸入是否為空
        if (!prompt) {
            alert('請輸入桌布描述');
            return;
        }
        
        // 顯示加載動畫
        showGeneratingState();
        
        // 開始進度條動畫
        startProgressBar();
        
        // 获取选择的清晰度
        var quality = $('.quality-active').attr('id') === 'hdQuality' ? 'hd' : 'default';
        
        // 發送API請求
        generateWallpaper(prompt, selectedType, quality);
    });
    
    // 重新生成按鈕點擊事件（使用上次的輸入重新生成）
    regenerateBtn.click(function() {
        // 顯示加載動畫
        showGeneratingState();
        
        // 開始進度條動畫
        startProgressBar();
        
        // 获取选择的清晰度
        var quality = $('.quality-active').attr('id') === 'hdQuality' ? 'hd' : 'default';
        
        // 使用上次的提示詞重新生成
        generateWallpaper(lastPrompt, selectedType, quality);
    });
    
    // 重新輸入按鈕點擊事件（返回輸入界面）
    restartBtn.click(function() {
        // 切換回輸入界面
        resultContainer.addClass('hidden');
        inputContainer.removeClass('hidden');
        
        // 重置生成按鈕狀態
        generateBtn.prop('disabled', false).html('<i class="fas fa-magic mr-2"></i> 生成桌布');
    });
    
    // 下載按鈕點擊事件
    downloadBtn.click(function() {
        const imageUrl = generatedImage.attr('src');
        if (!imageUrl) return;
        
        // 創建一個臨時鏈接元素來下載圖片
        const a = document.createElement('a');
        a.href = imageUrl;
        a.download = `${selectedType === 'mobile' ? '手機' : '電腦'}桌布_${new Date().getTime()}.jpg`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    });
    
    // 預覽按鈕點擊事件
    previewBtn.click(function() {
        // 切换预览状态
        if (mobileFrameContainer.hasClass('hidden')) {
            // 显示手机边框
            mobileFrameContainer.removeClass('hidden');
            // 更改图标为睁开的眼睛
            $(this).find('.preview-icon').removeClass('fa-eye-slash').addClass('fa-eye');
        } else {
            // 隐藏手机边框
            mobileFrameContainer.addClass('hidden');
            // 更改图标为闭上的眼睛
            $(this).find('.preview-icon').removeClass('fa-eye').addClass('fa-eye-slash');
        }
    });
    
    // 開始進度條動畫
    function startProgressBar() {
        // 重置進度條
        progressBar.css('width', '0%');
        progressText.text('0%');
        
        // 獲取預計生成時間
        estimatedTime = window.loadingTimeConfig ? window.loadingTimeConfig[selectedType] : (selectedType === 'mobile' ? 12 : 15);
        
        // 記錄開始時間
        startTime = new Date().getTime();
        
        // 清除可能存在的舊定時器
        if (progressInterval) {
            clearInterval(progressInterval);
        }
        
        // 計算剩餘時間
        updateTimeLeft(estimatedTime);
        
        // 設置進度條更新間隔
        progressInterval = setInterval(function() {
            // 計算已經過的時間（秒）
            const elapsedTime = (new Date().getTime() - startTime) / 1000;
            
            // 計算當前進度百分比（慢開始，快結束）
            let progress;
            if (elapsedTime < estimatedTime) {
                // 使用緩動函數使進度條先慢後快
                progress = Math.pow(elapsedTime / estimatedTime, 1.5) * 98;
            } else {
                // 超過預計時間後保持在98%
                progress = 98;
            }
            
            // 更新進度條
            progressBar.css('width', progress + '%');
            progressText.text(Math.round(progress) + '%');
            
            // 更新剩餘時間
            const remainingTime = Math.max(0, estimatedTime - elapsedTime);
            updateTimeLeft(remainingTime);
            
        }, 200); // 每200毫秒更新一次
    }
    
    // 更新剩餘時間顯示
    function updateTimeLeft(seconds) {
        if (seconds <= 0) {
            timeLeft.text('即將完成');
        } else if (seconds < 60) {
            timeLeft.text('預計剩餘' + Math.ceil(seconds) + '秒');
        } else {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = Math.ceil(seconds % 60);
            timeLeft.text('預計剩餘' + minutes + '分' + remainingSeconds + '秒');
        }
    }
    
    // 停止進度條動畫
    function stopProgressBar() {
        if (progressInterval) {
            clearInterval(progressInterval);
            progressInterval = null;
        }
        
        // 顯示100%完成
        progressBar.css('width', '100%');
        progressText.text('100%');
        timeLeft.text('完成');
    }
    
    // 顯示生成中狀態
    function showGeneratingState() {
        generatorOverlay.removeClass('hidden');
        generateBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i> 生成中...');
        
        // 如果在結果界面，也禁用重新生成和重新輸入按鈕
        if (!resultContainer.hasClass('hidden')) {
            regenerateBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i> 生成中...');
            restartBtn.prop('disabled', true);
        }
    }
    
    // 隱藏生成中狀態
    function hideGeneratingState() {
        generatorOverlay.addClass('hidden');
        generateBtn.prop('disabled', false).html('<i class="fas fa-magic mr-2"></i> 生成桌布');
        
        // 如果在結果界面，也恢復重新生成和重新輸入按鈕
        if (!resultContainer.hasClass('hidden')) {
            regenerateBtn.prop('disabled', false).html('<i class="fas fa-sync-alt mr-2"></i> 换一张');
            restartBtn.prop('disabled', false);
        }
        
        // 停止進度條動畫
        stopProgressBar();
    }
    
    // 顯示生成結果
    function showGeneratedResult(imageUrl) {
        // 隱藏輸入容器，顯示結果容器
        inputContainer.addClass('hidden');
        resultContainer.removeClass('hidden');
        
        // 隱藏生成中狀態
        hideGeneratingState();
        
        // 設置圖片並顯示加載動畫
        generatedImage.attr('src', imageUrl);
        imageLoadingOverlay.show();
        
        // 按鈕狀態
        downloadBtn.prop('disabled', true);
        regenerateBtn.prop('disabled', true);
        restartBtn.prop('disabled', true);
        previewBtn.prop('disabled', true);
        
        // 根據桌布類型顯示或隱藏預覽按鈕
        if (selectedType === 'mobile') {
            previewBtn.removeClass('hidden');
        } else {
            previewBtn.addClass('hidden');
        }
        
        // 圖片加載完成後
        generatedImage.on('load', function() {
            // 隱藏圖片加載動畫
            imageLoadingOverlay.fadeOut();
            
            // 啟用按鈕
            downloadBtn.prop('disabled', false);
            regenerateBtn.prop('disabled', false);
            restartBtn.prop('disabled', false);
            previewBtn.prop('disabled', false);
        });
    }
    
    // 發送AJAX請求生成桌布
    function generateWallpaper(prompt, type, quality) {
        // 發送AJAX請求到已實現的後端接口
        $.ajax({
            url: '/index/generate',
            type: 'POST',
            dataType: 'json',
            data: {
                prompt_text: prompt,
                wall_type: type,
                quality: quality
            },
            success: function(response) {
                if (response.code === 1) {
                    // 請求成功
                    const result = response.data;
                    showGeneratedResult(result.generated_image);
                    
                    // 更新使用次数
                    updateUsageCounter();
                    
                    // 可以在控制台顯示一些信息，方便調試
                    console.log('生成時間：' + result.ai_processing_time + 's');
                    console.log('描述：' + result.description);
                } else if (response.code === 411) {
                    // 需要绑定Google账号
                    showGoogleBindModal(response.msg || '請綁定Google賬號以享受更多生成次數');
                    hideGeneratingState();
                } else {
                    // 請求失敗
                    alert(response.msg || '生成失敗，請稍後重試');
                    hideGeneratingState();
                }
            },
            error: function(xhr, status, error) {
                // 處理網絡錯誤
                alert('網絡錯誤，請檢查您的網絡連接');
                console.error('AJAX Error: ' + status + ' - ' + error);
                hideGeneratingState();
            }
        });
    }
    
    // 更新使用次数计数器
    function updateUsageCounter() {
        // 获取当前使用次数并加1
        var currentUsed = parseInt(window.used_limit || 0) + 1;
        window.used_limit = currentUsed;
        
        // 更新两处显示
        $('#usedLimitDisplay, #resultUsedLimitDisplay').text(currentUsed);
        
        // 检查是否达到限制
        var dailyLimit = parseInt(window.daily_limit || 0);
        if (currentUsed >= dailyLimit) {
            // 已达到限制
            showToast('您今日的生成次數已用完', 'warning');
            // 禁用生成按钮
            generateBtn.prop('disabled', true).html('<i class="fas fa-ban mr-2"></i> 今日次數已用完');
            regenerateBtn.prop('disabled', true).html('<i class="fas fa-ban mr-2"></i> 今日次數已用完');
        }
    }
    
    // 显示Google绑定提示弹层
    function showGoogleBindModal(message) {
        // 创建弹层HTML
        if ($('#google-bind-modal-overlay').length === 0) {
            var modalHtml = `
                <div id="google-bind-modal-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                    <div class="bg-white rounded-lg p-6 max-w-md mx-4 relative">
                        <div class="close-modal absolute top-4 right-4 text-gray-400 hover:text-gray-600 cursor-pointer text-xl">&times;</div>
                        
                        <!-- 提示文字 -->
                        <div class="text-center mb-6">
                            <div class="mb-4">
                                <i class="fas fa-info-circle text-blue-500 text-3xl mb-2"></i>
                            </div>
                            <p class="text-gray-600 text-sm leading-relaxed" id="google-bind-message">
                                ${message}
                            </p>
                        </div>
                        
                        <!-- Google登录按钮 -->
                        <div class="text-center">
                            <a href="${google_login_url}" class="inline-flex items-center justify-center bg-white border border-gray-300 rounded-lg px-6 py-3 text-gray-700 font-medium hover:bg-gray-50 transition-colors duration-200 shadow-sm">
                                <svg class="w-5 h-5 mr-3" viewBox="0 0 24 24">
                                    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                                    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                                    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                                    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                                </svg>
                                使用 Google 賬號登錄
                            </a>
                        </div>
                        
                        <!-- 底部说明 -->
                        <div class="text-center mt-4">
                            <p class="text-xs text-gray-500">
                                綁定後可享受更多免費生成次數
                            </p>
                        </div>
                    </div>
                </div>
            `;
            
            $('body').append(modalHtml);
            
            // 关闭弹层事件
            $(document).on('click', '#google-bind-modal-overlay .close-modal, #google-bind-modal-overlay', function(e) {
                if (e.target === this) {
                    $('#google-bind-modal-overlay').remove();
                }
            });
        } else {
            // 更新消息内容
            $('#google-bind-message').text(message);
        }
        
        // 显示弹层
        $('#google-bind-modal-overlay').show();
    }
    
    // 显示提示信息
    function showToast(message, type = 'info') {
        // 创建toast元素
        var toast = $('<div class="toast-message"></div>');
        toast.text(message);
        
        // 根据类型设置样式
        if (type === 'warning') {
            toast.addClass('toast-warning');
        } else if (type === 'error') {
            toast.addClass('toast-error');
        } else if (type === 'success') {
            toast.addClass('toast-success');
        }
        
        // 添加到页面
        $('body').append(toast);
        
        // 显示动画
        setTimeout(function() {
            toast.addClass('toast-show');
        }, 10);
        
        // 3秒后隐藏
        setTimeout(function() {
            toast.removeClass('toast-show');
            setTimeout(function() {
                toast.remove();
            }, 300);
        }, 3000);
    }
    
    // 检查使用次数限制
    function checkUsageLimit() {
        var currentUsed = parseInt(window.used_limit || 0);
        var dailyLimit = parseInt(window.daily_limit || 0);
        
        // 如果已达到限制，禁用生成按钮
        if (currentUsed >= dailyLimit) {
            generateBtn.prop('disabled', true).html('<i class="fas fa-ban mr-2"></i> 今日次數已用完');
            regenerateBtn.prop('disabled', true).html('<i class="fas fa-ban mr-2"></i> 今日次數已用完');
        }
    }
    
    // 初始化标签切换功能
    function initTabSwitching() {
        // 检测是否为移动设备
        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        
        // 默认选择适合当前设备的选项卡
        if (isMobile) {
            // 移动设备默认显示手机桌布
            $('#mobile-tab').addClass('active');
            $('#desktop-tab').removeClass('active');
            $('#featured-mobile').addClass('active');
            $('#featured-desktop').removeClass('active');
            
            $('#latest-mobile-tab').addClass('active');
            $('#latest-desktop-tab').removeClass('active');
            $('#latest-mobile-content').addClass('active');
            $('#latest-desktop-content').removeClass('active');
            
            $('#popular-mobile-tab').addClass('active');
            $('#popular-desktop-tab').removeClass('active');
            $('#popular-mobile-content').addClass('active');
            $('#popular-desktop-content').removeClass('active');
        }
        
        // 推荐桌布标签切换
        $('#desktop-tab').click(function() {
            $(this).addClass('active');
            $('#mobile-tab').removeClass('active');
            $('#featured-desktop').addClass('active');
            $('#featured-mobile').removeClass('active');
        });
        
        $('#mobile-tab').click(function() {
            $(this).addClass('active');
            $('#desktop-tab').removeClass('active');
            $('#featured-mobile').addClass('active');
            $('#featured-desktop').removeClass('active');
        });
        
        // 最新桌布标签切换
        $('#latest-desktop-tab').click(function() {
            $(this).addClass('active');
            $('#latest-mobile-tab').removeClass('active');
            $('#latest-desktop-content').addClass('active');
            $('#latest-mobile-content').removeClass('active');
        });
        
        $('#latest-mobile-tab').click(function() {
            $(this).addClass('active');
            $('#latest-desktop-tab').removeClass('active');
            $('#latest-mobile-content').addClass('active');
            $('#latest-desktop-content').removeClass('active');
        });
        
        // 热门桌布标签切换
        $('#popular-desktop-tab').click(function() {
            $(this).addClass('active');
            $('#popular-mobile-tab').removeClass('active');
            $('#popular-desktop-content').addClass('active');
            $('#popular-mobile-content').removeClass('active');
        });
        
        $('#popular-mobile-tab').click(function() {
            $(this).addClass('active');
            $('#popular-desktop-tab').removeClass('active');
            $('#popular-mobile-content').addClass('active');
            $('#popular-desktop-content').removeClass('active');
        });
    }
});
